import React, { Component } from 'react';
import ReactDom , { render } from 'react-dom'
import { observable, useStrict, action } from 'mobx';
import { observer } from 'mobx-react';
import BaseApp from './BaseApp';

@observer
class Msg2 extends BaseApp {
    constructor(props){
        super(props);

        this.pic = [
            {name:"cao",title:"草"},
            {name:"hua",title:"花"},
            {name:"shu",title:"树"},
        ];
        this.module = null;

        this.changePic = (event)=>{
            let _thisEle = event.currentTarget;
            let currClassName = _thisEle.classList[1];

            this.removeComp(this.module);
            this.module = render(<div className={`cus-pic ${currClassName}`} />, document.getElementById('image'))
        };

        this.removeComp = (react)=>{
            if(typeof react !== "undefined" && react !== null){
                let pNode = ReactDom.findDOMNode(react).parentNode;
                ReactDom.unmountComponentAtNode(pNode);
            }
        }

    }
    render() {
        return [
            <p className="App-intro" key={this.util.uuid(5)}>
                页面2起的名字在这里：{this.store.name}
            </p>,
            <div style={{height:1,borderBottom:"2px solid #DDD",margin:"10px 0"}} key={this.util.uuid(5)}/>,
            <p className="App-intro" key={this.util.uuid(5)}>
                单页面切换如下：
            </p>,
            <div key={this.util.uuid(5)}>
                <button onClick={this.changePic} className={`btn _${this.pic[0].name}`}>{this.pic[0].title}</button>
                <button onClick={this.changePic} className={`btn _${this.pic[1].name}`}>{this.pic[1].title}</button>
                <button onClick={this.changePic} className={`btn _${this.pic[2].name}`}>{this.pic[2].title}</button>
                <div id={"image"} />
            </div>
        ];
    }
}

export default Msg2;
